(() => {
  let ele = {};
  ele.task = $("#task");
  ele.modal_shuoming = $("#modal-shuoming");
  ele.chahao2 = $("#chahao2");
  ele.btn_que3 = $("#btn_que3");
  ele.chahao3 = $("#chahao3");
  ele.btn_que4 = $("#btn_que4");
  ele.lists = $("#lists");
  ele.lists2 = $("#lists2");
  ele.lists12 = $("#lists12");
  ele.lists3 = $("#lists3");
  ele.btn_shang = $("#btn_shang");
  ele.option_new = $("#option-new");
  ele.option_gong = $("#option-gong");
  ele.option_room = $("#option-room");
  ele.option_week = $("#option-week");
  ele.paiji = $("#paiji");
  ele.b_btn_jing = $("#b_btn_jing");
  ele.lists = $("#lists");
  ele.lists13 = $("#lists13");
  ele.lists2 = $("#lists2");
  ele.lists10 = $("#lists10");
  ele.btn_que3 = $("#btn_que3");
  ele.lingquBtn = $("#lingquBtn");
  ele.chahao2 = $("#chahao2");
  ele.jing_bi = $("#jing_bi");
  ele.seachBtn = $("#seachBtn");
  ele.inpSeach = $("#inpSeach");
  ele.my_btn = $("#my_btn");
  ele.beijing = $("#beijing");
  ele.modal_success = $("#modal-success");
  ele.jinbiShu = $("#jinbiShu");
  ele.modal_jinbi = $("#modal-jinbi");
  ele.modal_quepay = $("#modal-quepay");
  ele.more3 = $("#more3");
  ele.empty3 = $("#empty3");
  ele.more2 = $("#more2");
  ele.empty2 = $("#empty2");
  ele.meiyou1 = $("#meiyou1");
  ele.meiyou2 = $("#meiyou2");
  ele.meiyou3 = $("#meiyou3");
  ele.more1 = $("#more1");
  ele.empty1 = $("#empty1");
  ele.zzdzj = $("#zzdzj");
  ele.lists4 = $("#lists4");
  ele.lists44 = $("#lists44");
  ele.scerh = $("#scerh");
  ele.fangName = $("#fangName");
  ele.mernyPay = $("#mernyPay");
  ele.more4 = $("#more4");
  ele.empty4 = $("#empty4");
  ele.meiyou4 = $("#meiyou4");
  let num = getCookie("typeNum") || 1;
  let my = 0;
  let page = 1;
  let list10 = [];
  let list12 = [];
  let list13 = [];
  let list14 = [];
  let list = [];
  let myMoney = "";
  // todo关闭玩法介绍
  ele.chahao2.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  // todo关闭玩法介绍
  ele.btn_que3.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  // todo点击关闭
  ele.lingquBtn.onclick = () => {
    openTips("领取成功");
    closeMdl(ele.modal_success);
  };
  // todo点击tabbar切换房产交易1
  ele.option_new.onclick = () => {
    ele.inpSeach.value = "";
    page = 1;
    num = 1;
    list12 = [];
    list13 = [];
    list10 = [];
    list14 = [];
    setCookie("typeNum", 1);
    //? 这个是用来切换tabBar
    tabBarQie();
    asyncList(page, num);
    //? 这个是用来切换我的按钮来筛选
    tabMy();
  };
  // todo点击tabbar切换房产拍卖2
  ele.option_room.onclick = () => {
    ele.inpSeach.value = "";
    page = 1;
    num = 2;
    list10 = [];
    list12 = [];
    list13 = [];
    list14 = [];
    setCookie("typeNum", 2);
    //? 这个是用来切换tabBar
    tabBarQie();
    asyncList(page, num);
    //? 这个是用来切换我的按钮来筛选
    tabMy();
  };
  // todo点击tabbar切换违约拍卖3
  ele.option_week.onclick = () => {
    ele.inpSeach.value = "";
    page = 1;
    num = 3;
    //? 这个是用来切换tabBar
    list10 = [];
    list12 = [];
    list13 = [];
    list14 = [];
    setCookie("typeNum", 3);
    asyncList(page, num);
    tabBarQie();
    //? 这个是用来切换我的按钮来筛选
    tabMy();
  };
  // todo点击tabbar切换公示期4
  ele.option_gong.onclick = () => {
    ele.inpSeach.value = "";
    page = 1;
    num = 4;
    //? 这个是用来切换tabBar
    list10 = [];
    list12 = [];
    list13 = [];
    list14 = [];
    setCookie("typeNum", 4);
    gongshiqi();
    console.log("123456");
    tabBarQie();
    //? 这个是用来切换我的按钮来筛选
    tabMy();
  };
  // todo点击×关闭确认购买
  ele.chahao2.onclick = () => {
    closeMdl(ele.modal_quepay);
  };
  // todo点击搜索按钮后
  ele.seachBtn.onclick = () => {
    let inpValue = ele.inpSeach.value.trim();
    if (inpValue.length == 0) {
      openTips("请输入搜索的内容");
    }
    list = [];
    list10 = [];
    list13 = [];
    list12 = [];
    list14 = [];
    // if (num == 1) {
    asyncList(1, num, inpValue);
    if (num == 4) {
      gongshiqi(inpValue);
    }
    // }
  };
  tabBarQie();

  //todo点击我的切换
  tabMy();
  function tabMy() {
    ele.switch = $("#switch");
    ele.switch.onclick = () => {
      if (my == 0) {
        my = 1;
      } else if (my == 1) {
        my = 0;
      }
      console.log(my);
      list = [];
      list10 = [];
      list13 = [];
      list12 = [];
      list14 = [];
      if (num == 1) {
        asyncList(1, 1);
      } else if (num == 2) {
        asyncList(1, 2);
      } else if (num == 3) {
        asyncList(1, 3);
      } else if (num == 4) {
        page = 1;
        console.log("123455");
        // asyncList(1, 4);
        gongshiqi();
      }
    };
  }
  // todo判断num为几，就到几
  function tabBarQie() {
    my = 0;
    ele.my_btn.innerHTML = `我的：
    <div id="search_checkbox" class="search_checkbox">
      <input type="checkbox" id="switch" />
      <label for="switch"></label>
    </div>`;
    if (num == 1) {
      // ?对下面的按钮做显示隐藏处理
      ele.btn_shang.innerHTML = "上架出售";
      openMdl(ele.btn_shang);
      closeMdl(ele.paiji);
      ele.option_new.classList.add("option-active");
      ele.option_room.classList.remove("option-active");
      ele.option_gong.classList.remove("option-active");
      ele.option_week.classList.remove("option-active");
      // ?显示要显示的列表
      openMdl(ele.lists);
      closeMdl(ele.lists2);
      closeMdl(ele.lists3);
      closeMdl(ele.lists4);
    } else if (num == 2) {
      // ?对下面的按钮做显示隐藏处理
      ele.btn_shang.innerHTML = "上架拍卖";
      openMdl(ele.btn_shang);
      openMdl(ele.paiji);
      ele.option_room.classList.add("option-active");
      ele.option_gong.classList.remove("option-active");
      ele.option_new.classList.remove("option-active");
      ele.option_week.classList.remove("option-active");
      openMdl(ele.lists2);
      closeMdl(ele.lists);
      closeMdl(ele.lists3);
      closeMdl(ele.lists4);
    } else if (num == 3) {
      // ?对下面的按钮做显示隐藏处理
      closeMdl(ele.btn_shang);
      openMdl(ele.paiji);
      ele.option_week.classList.add("option-active");
      ele.option_gong.classList.remove("option-active");
      ele.option_new.classList.remove("option-active");
      ele.option_room.classList.remove("option-active");
      openMdl(ele.lists3);
      closeMdl(ele.lists2);
      closeMdl(ele.lists);
      closeMdl(ele.lists4);
    } else {
      // ?对下面的按钮做显示隐藏处理
      closeMdl(ele.btn_shang);
      openMdl(ele.paiji);
      ele.option_gong.classList.add("option-active");
      ele.option_week.classList.remove("option-active");
      ele.option_new.classList.remove("option-active");
      ele.option_room.classList.remove("option-active");
      openMdl(ele.lists4);
      closeMdl(ele.lists2);
      closeMdl(ele.lists3);
      closeMdl(ele.lists);
    }
  }
  // todo点击金币领取
  ele.jing_bi.onclick = () => {
    closeMdl(ele.modal_jinbi);
    openTips("领取成功");
  };
  // todo点击上架出售
  ele.btn_shang.onclick = () => {
    if (num == 1) {
      location.href = "../page/fang_estate_sale.html";
    } else if (num == 2) {
      location.href = "../page/fang_estate_auction.html";
    }
  };
  // todo点击拍卖纪录跳转到记录
  ele.paiji.onclick = () => {
    location.href = "../page/fang_record.html";
  };
  // todo点击查和确认
  ele.btn_que4.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  ele.chahao3.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  // !发送请求!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  // !点击筛选我的
  // ele.switch = $("#switch");
  // ele.switch.onclick = () => {
  //   console.log("1010101");
  //   list = [];
  //   list10 = [];
  //   list12 = [];
  //   list13 = [];

  // };
  if (num == 4) {
    gongshiqi();
  }
  asyncList(1, num);
  function asyncList(page, num = 1, no = "") {
    if (num == 4) {
      return;
    }
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.TRANKLIST,
      header: {
        Authorization: token,
      },
      data: {
        page: page,
        type: num,
        // size: 2,
        is_me: my,
        no: no,
      },
      success: (res) => {
        if (res.code == 1) {
          list = res.data.auctionRecord.data;
          // console.log(list, "1000");
          // if (num == 1) {
          //   list10 = res.data.auctionRecord.data;
          // } else if (numm == 2) {
          //   list12 = res.data.auctionRecord.data;
          // } else {
          //   list13 = res.data.auctionRecord.data;
          // }
          if (num == 1) {
            myMoney = res.data.gold;
            list10 = [...list10, ...res.data.auctionRecord.data];
            // initList();
            if (list10.length == 0) {
              closeMdl(ele.meiyou1);
            }
          } else if (num == 2) {
            list12 = [...list12, ...res.data.auctionRecord.data];
            // initList();
            if (list12.length == 0) {
              closeMdl(ele.meiyou2);
            }
          } else if (num == 3) {
            list13 = [...list13, ...res.data.auctionRecord.data];
            if (list13.length == 0) {
              closeMdl(ele.meiyou3);
            }
            // initList();
          }

          if (list.length == 0) {
            initList();
            page = 0;
            if (num == 1) {
              ele.more1.style.display = "none";
              ele.empty1.style.display = "block";
            } else if (num == 1) {
              ele.more2.style.display = "none";
              ele.empty2.style.display = "block";
            } else {
              ele.more3.style.display = "none";
              ele.empty3.style.display = "block";
            }
          } else {
            initList();
            page++;
            if (page > res.data.auctionRecord.last_page) {
              if (num == 1) {
                ele.more1.innerText = "没有更多了";
                ele.more1.onclick = null;
              } else if (num == 2) {
                if (list12.length == 0) {
                  ele.more2.innerText = " ";
                } else {
                  ele.more2.innerText = "没有更多了";
                  ele.more2.onclick = null;
                }
              } else {
                ele.more3.innerText = "没有更多了";
                ele.more3.onclick = null;
              }
            } else {
              if (num == 1) {
                ele.more1.innerText = "加载更多";
                ele.more1.onclick = () => asyncList(page, num);
              } else if (num == 2) {
                ele.more2.innerText = "加载更多";
                ele.more2.onclick = () => asyncList(page, num);
              } else {
                ele.more3.innerText = "加载更多";
                ele.more3.onclick = () => asyncList(page, num);
              }
            }
          }
        } else openTips(res.msg);
        // if (num == 1) {
        //   list10 = [...list10, ...res.data.auctionRecord.data];
        //   // initList();
        // } else if (num == 2) {
        //   list10 = [...list12, ...res.data.auctionRecord.data];
        //   // initList();
        // } else if (num == 3) {
        //   list10 = [...list13, ...res.data.auctionRecord.data];
        //   // initList();
        // }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !渲染第四个
  function gongshiqi(no = " ") {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.GONGSHIQI,
      header: {
        Authorization: token,
      },
      data: {
        page: page,
        is_me: my,
        no: no,
        // size: 1,
      },
      success: (res) => {
        if (res.code == 1) {
          // obj = res.data.detail;
          list14 = [...list14, ...res.data.data];
          if (list14.length === 0) {
            page = 0;
            ele.more4.style.display = "none";
            ele.empty4.style.display = "block";
          } else {
            initList4();
            page++;
            if (page > res.data.last_page) {
              ele.more4.innerText = "没有更多了";
              ele.more4.onclick = null;
            } else {
              console.log("101010");
              ele.more4.innerText = "加载更多";
              ele.more4.onclick = () => gongshiqi(page);
            }
          }
        } else openTips(res.msg);
        initList4();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !第四个渲染
  function initList4() {
    let newlist = list14
      .map((item) => {
        return `<div class="list_son">
              <div class="left">
                <div class="img">
                  <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
                </div>
                <div class="cen">
                  <p class="t">${item.house_detail.name}房产证</p>
                  <p>房产编号：${item.no}</p>
                  <p>可住人数：${item.house_detail.zf_num}</p>
                </div>
              </div>
              <div class="left_btn">
               <div style="font-size:14px;margin-bottom:10px;">价格：<span style="color:#ff0000;">${
                 item.over_money
               }金币</span></div>
               <div style="font-size:14px;margin-bottom:10px;">倒计时：<span id="time" data-time="${
                 item.cold_time
               }" style="color:#ff0000;"> </span></div>
                  <p style="color:#ff0000;font-size:14px; display:${
                    item.type == 1 ? "block" : "none"
                  };" class="h">类型：房产出售</p>
          <p style="color:#ff0000;font-size:14px; display:${
            item.type == 2 ? "block" : "none"
          };" class="h">类型：房产拍卖</p>
          <p style="color:#ff0000;font-size:14px; display:${
            item.type == 3 ? "block" : "none"
          };" class="h">类型：违约拍卖</p>
              </div>
            </div>`;
      })
      .join(" ");
    ele.lists44.innerHTML = newlist;
    // !渲染时间
    let timeAll = document.querySelectorAll("#time");
    timeAll.forEach((item) => {
      setInterval(() => {
        item.innerHTML = getCountTime(item.dataset.time);
      }, 1000);
    });
  }
  //! 渲染第一个列表数据------------------------------------------------
  // initList();
  function initList() {
    let newList = list10
      .map((item, index) => {
        return `  <div class="list_son">
      <div class="left">
        <div class="img">
          <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
        </div>
        <div class="cen">
          <p class="t">${item.house_detail.name}</p>
          <p>房产编号：${item.no}</p>
          <p>可住人数：${item.house_detail.zf_num}</p>
        </div>
      </div>
      <div class="left_btn">
        <!-- <div class="t">当前价高</div> -->
        <div id="pay_p" data-no="${item.no}" data-id="${item.id}" data-pay="${
          item.money
        }" data-name="${item.house_detail.name}" data-ind="${index}" class="b">
          <div class="b_btn">
            <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jinbi.png" alt="" /><span
              >${item.money}</span
            >
          </div>
          <div>购买</div>
        </div>
      </div>
    </div>`;
      })
      .join(" ");
    ele.lists10.innerHTML = newList;
    if (list10.length == 0) {
      ele.lists10.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }
    // !点击购买
    let pay_pAll = document.querySelectorAll("#pay_p");
    pay_pAll.forEach((item) => {
      item.onclick = () => {
        // 渲染弹窗
        ele.zzdzj.innerHTML = `${item.dataset.pay}金币`;
        ele.fangName.innerHTML = `${item.dataset.name}，房产编号${item.dataset.no}吗？`;
        ele.mernyPay.innerHTML = myMoney;
        openMdl(ele.modal_quepay);
        ele.btn_que3.onclick = () => {
          fangPay(item.dataset.id);
        };
      };
    });
    // !这个是第二个tabBar的页面赋值-----------------------------------------
    let newList2 = list12
      .map((item, index) => {
        return `
      <div class="list_son">
      <div class="left">
        <div class="img">
          <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
        </div>
        <div class="cen">
          <p class="t">${item.house_detail.name}</p>
          <p>房产编号：${item.no}</p>
          <p>可住人数：${item.house_detail.zf_num}</p>
        </div>
      </div>
      <div class="left_btn">
        <div style="display:${
          item.state == 0 ? "block" : "none"
        };" class="t">当前高价</div>
        <div style="display:${
          item.state == 10 ? "block" : "none"
        };" class="t">竞拍成功</div>
        <div style="display:${
          item.state == 5 ? "block" : "none"
        };" class="t">拍卖中</div>
        <div style="display:${
          item.state == 15 ? "block" : "none"
        };" class="t">拍卖成功</div>
        <div data-id="${item.id}"  id="href_btns" style="display:${
          item.state == 0 ? "block" : "none"
        };" class="b">
          <div class="b_btn" data-ind="${index}" id="b_btn_jing">
            <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jinbi.png" alt="" /><span
              >${item.over_money}</span
            >
          </div>
          <div>竞拍</div>
        </div>
        <div style="display:${
          item.state == 10 ? "block" : "none"
        };" data-img="${item.house_detail.logo}" data-bian="${
          item.no
        }" data-name="${item.house_detail.name}" data-id="${
          item.id
        }" id="huoqu" class="c">点击获得</div>
        <div style="display:${
          item.state == 5 ? "block" : "none"
        };" id="href_btn" data-id="${item.id}" class="c">点击查看</div>
        <div id="jinbi_L" data-id="${item.id}" data-jinbi="${
          item.over_money
        }" data-ind="${index}" style="display:${
          item.state == 15 ? "block" : "none"
        };" class="c">领取金币</div>
      </div>
    </div>`;
      })
      .join(" ");
    ele.lists12.innerHTML = newList2;
    if (list12.length == 0) {
      ele.lists12.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }
    // todo点击竞拍竞拍详情跳转到详情
    let href_btnsAll = document.querySelectorAll("#href_btns");
    href_btnsAll.forEach((item) => {
      item.onclick = () => {
        location.href = `../page/fang_listing.html?id=${item.dataset.id}`;
      };
    });
    // todo点击查看竞拍详情跳转到详情
    let href_btnAll = document.querySelectorAll("#href_btn");
    href_btnAll.forEach((item) => {
      item.onclick = () => {
        location.href = `../page/fang_listing.html?id=${item.dataset.id}`;
      };
    });
    // todo金币领取
    let jinbi_LAll = document.querySelectorAll("#jinbi_L");
    jinbi_LAll.forEach((item) => {
      item.onclick = () => {
        // 点击领取金币后弹出框
        // openMdl(ele.modal_jinbi);
        jinbiL(item.dataset.id, item.dataset.jinbi);
      };
    });
    // todo点击获取房产证
    let huoquAll = document.querySelectorAll("#huoqu");
    huoquAll.forEach((item) => {
      item.onclick = () => {
        jinbiL(
          item.dataset.id,
          0,
          item.dataset.img,
          item.dataset.bian,
          item.dataset.name
        );
      };
    });
    // !这个是第三个tabBar的页面赋值--------------------------------------------
    let newList3 = list13
      .map((item) => {
        return `
      <div class="list_son">
      <div class="left">
        <div class="img">
          <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
        </div>
        <div class="cen">
          <p class="t">${item.house_detail.name}</p>
          <p>房产编号：${item.no}</p>
          <p>可住人数：${item.house_detail.zf_num}</p>
        </div>
      </div>
      <div class="left_btn">
        <div style="display:${
          item.state != 0 ? "block" : "none"
        };" class="t">竞拍成功</div>
        <div id="jingpai" data-id="${item.id}" style="display:${
          item.state == 0 ? "block" : "none"
        };" class="b">
          <div class="b_btn">
            <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jinbi.png" alt="" /><span
              >5000</span
            >
          </div>
          <div id="jinpaiX">竞拍</div>
        </div>
         <div id="huoqus" data-img="${item.house_detail.logo}" data-bian="${
          item.no
        }" data-name="${item.house_detail.name}“ data-id="${
          item.id
        }" style="display:${
          item.state != 0 ? "block" : "none"
        };" class="c">点击获得</div> 
      </div>
    </div>`;
      })
      .join(" ");
    ele.lists13.innerHTML = newList3;
    if (list13.length == 0) {
      ele.lists13.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }

    // !违约竞拍点击后跳转到竞拍详情
    let jinpaiXAll = document.querySelectorAll("#jingpai");
    jinpaiXAll.forEach((item) => {
      item.onclick = () => {
        location.href = `../page/fang_listing.html?id=${item.dataset.id}`;
      };
    });
  }
  // todo点击获取房产证
  let huoqusAll = document.querySelectorAll("#huoqus");
  huoqusAll.forEach((item) => {
    item.onclick = () => {
      jinbiL(
        item.dataset.id,
        0,
        item.dataset.img,
        item.dataset.bian,
        item.dataset.name
      );
    };
  });
  // fangPay();购买成功
  function fangPay(id) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.GOUMAI,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
      },
      success: (res) => {
        list = [];
        list10 = [];
        list13 = [];
        openTips(res.msg);
        asyncList(1, num);
        closeMdl(ele.modal_quepay);
        if (res.code == 1) {
          ele.beijing.innerHTML = `<img src="${
            IMG_DOMAIN + res.data.logo
          }" alt="" />
<p id="fangchan">${res.data.name}<br />房产编号为：${res.data.l_id}</p>`;
          openMdl(ele.modal_success);
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // fangPay();购买成功
  function jinbiL(id, jinbi, img, bian, name) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.JINBIL,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
      },
      success: (res) => {
        list = [];
        list10 = [];
        list12 = [];
        list13 = [];
        asyncList(1, num);
        if (jinbi != 0) {
          closeMdl(ele.modal_quepay);
          if (res.code == 1) {
            ele.jinbiShu.innerHTML = `x${jinbi}`;
            openMdl(ele.modal_jinbi);
          } else {
            openTips(res.msg);
          }
        } else {
          if (res.code == 1) {
            ele.beijing.innerHTML = `<img src="${IMG_DOMAIN + img}" alt="" />
            <p id="fangchan">${name}房产证<br />房产编号为：${bian}</p>`;
            openMdl(ele.modal_success);
          } else {
            openTips(res.msg);
          }
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
})();
